<template>
  <div class="common-layout">
    <HeadContent title="职位信息管理"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="size">
          <div class="flex flex-wrap gap-4">
            <el-card style="width: 150vh" shadow="hover">
              <el-form :model="form" :inline="true" class="demo-form-inline">
                <el-form-item label="名称">
                  <el-input v-model="form.posName" />
                </el-form-item>
                <el-form-item>
                  <el-select v-model="form.posStatus" placeholder="---请选择---">
                    <el-option label="活动" value=1 />
                    <el-option label="撤销" value=2 />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit"><el-icon>
                      <Search />
                    </el-icon>&nbsp;查询</el-button>
                  <el-button type="primary" @click="resetForm"><el-icon>
                      <RefreshRight />
                    </el-icon>&nbsp;重置</el-button>
                  <el-button type="primary" @click="$router.push('/addposition')"><el-icon>
                      <CirclePlus />
                    </el-icon>&nbsp;新增职位</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>

          <el-card style="width: 150vh" shadow="hover">
            <el-table :data="positionList" style="width: 100%">
              <el-table-column fixed prop="posId" label="编号" width="200" />
              <el-table-column prop="posName" label="职位名称" width="200" />
              <el-table-column prop="level" label="职位级别" width="200" />
              <el-table-column prop="status" label="状态" width="200" />
              <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">

                 
                    <el-button type="primary" size="100px"
                      @click="$router.push({ path: '/selectposition', query: { id: scope.row.posId } })">
                      <el-icon>
                        <View />
                      </el-icon>&nbsp;查看
                    </el-button>
                    <el-button type="warning" @click="doDialogFormVisible(scope.row)"><el-icon>
                        <Refresh />
                      </el-icon>&nbsp;修改</el-button>
                    <div v-if="scope.row.isReverted" class="CaozuoDiv">
                      <el-button type="primary" @click="revertRow(scope.row)"><el-icon>
                          <Plus />
                        </el-icon>&nbsp;恢复</el-button>
                    </div>
                    <div v-else class="CaozuoDiv">
                      <el-button type="danger" @click="revokeRow(scope.row)"><el-icon>
                          <Minus />
                        </el-icon>&nbsp;撤销</el-button>
                    </div>
                  </template>

              
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->
          <el-pagination background layout="prev, pager, next" :total="10" />
        </el-space>
      </el-main>
    </el-container>
  </div>
  <!--弹出框内容-->
  <el-dialog v-model="dialogFormVisible" title="职位信息" width="500">
    <el-form :model="updateform">
      <el-form-item label="职位名称：" :label-width="formLabelWidth">
        <el-input v-model="updateform.posName" />
      </el-form-item>
      <el-form-item label="职位级别：" :label-width="formLabelWidth">
        <el-input type="number" v-model="updateform.level" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" @click="handleSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import {
  View, Refresh, Plus, Minus, RefreshRight, CirclePlus,
  Search,
  // Position
} from '@element-plus/icons-vue'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const updateform = reactive({
  posName: '',
  level: 1,
  posId: 1
})
function doDialogFormVisible(row: any) {
  dialogFormVisible.value = true;
  updateform.posName = row.posName
  updateform.level = parseInt(row.level)
  updateform.posId = row.posId
}
import HeadContent from '@/components/HeadContent.vue'
const flag = ref<boolean>(true)
// do not use same name with ref
const form = ref({
  posName: '',
  posStatus: '',

})
import TagComtent from '@/components/TagComtent.vue'
const onSubmit = async () => {

  const res = await selectPos(form.value.posName, form.value.posStatus)
  positionList.value = res.data;
  for (let i = 0; i < positionList.value.length; i++) {
    if (positionList.value[i].status == "活动") {
      positionList.value[i].isReverted = false;
    }
    else {
      positionList.value[i].isReverted = true;
    }
  }
  console.log(positionList.value)

}

// const handleClick = () => {
//   console.log('click')
// }
import { ref } from 'vue'
// import router from '@/router'
import { getPosition, selectPos, updatePosition, updateStatus } from '@/api/pos'
import type { Pos } from '@/model'

const size = ref(40)
const positionList = ref<Pos[]>([])

//获取职位信息
const getPositionFn = async () => {
  const res = await getPosition();
  positionList.value = res.data;
  for (let i = 0; i < positionList.value.length; i++) {
    if (positionList.value[i].status == "活动") {
      positionList.value[i].isReverted = false;
    }
    else {
      positionList.value[i].isReverted = true;
    }
  }
  console.log(positionList.value)
}
getPositionFn()
const handleSubmit = async () => {
  try {
    // 提交更新
    await updatePosition(updateform);

    // 重新获取数据
    const response = await getPosition();
    positionList.value = response.data; // 假设响应中有一个data属性包含新数据列表
    dialogFormVisible.value = false; // 关闭对话框
    alert('更新成功'); // 可以显示一个成功的提示信息给用户
  } catch (error) {
    console.error('更新或获取数据失败:', error);
    // 显示错误消息给用户
  }
}

async function revertRow(row: any) {
  row.isReverted = false; // 恢复行状态
  // 可能还有其他恢复逻辑...
  await updateStatus(row.posId, '1'); // 调用更新接口，将状态改为活动
  getPositionFn()
  onSubmit()
}
async function revokeRow(row: any) {
  row.isReverted = true; // 撤销行状态
  // 可能还有其他撤销逻辑...
  await updateStatus(row.posId, '2');
  getPositionFn()
  onSubmit()
}
function resetForm() {
  form.value = {
    posName: '',
    posStatus: '' // 重置为初始状态或默认状态值
  };
}
</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 12px;
  display: inline;
}
</style>
